<template>
	<view class="s-scene">
		<uni-grid :column="4" :showBorder="false" :highlight="false" @change="onChange">
			<uni-grid-item v-for="(d, index) in gridList" :index="index" :key="d.id">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons custom-prefix="iconfont" color="#05C697" :type="d.icontype" :size="d.iconsize"></uni-icons>
					<text class="text">{{ d.name }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>

		<uni-stitle :title="'常用场景'" :padding="true" :background="'#f5f5f5'"></uni-stitle>
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="intelligence-item" v-for="d in intelligenceList" :key="d.id" @click="ClickSpecial(d)">
					<view class="title">{{ d.title }}</view>
					<image class="speimg" :src="d.imgspecial" mode="aspectFill"></image>
				</view>
			</scroll-view>
		</view>

		<uni-stitle :title="'外部链接(uni-list实现)'" :padding="true" :background="'#f5f5f5'"></uni-stitle>
		<uni-list><uni-list-item v-for="(d, index) in iframeArr" :key="index" :title="d.title" clickable showArrow @click="goiframe(d)"></uni-list-item></uni-list>

		<uni-stitle :title="'uEcharts'" :padding="true" :background="'#f5f5f5'"></uni-stitle>
		<uni-list>
			<uni-list-item title="echart-柱状图" clickable showArrow to="/pages/scene/scene-echart-column"></uni-list-item>
			<uni-list-item title="echart-折线图" clickable showArrow to="/pages/scene/scene-echart-line"></uni-list-item>
			<uni-list-item title="echart-饼状图" clickable showArrow to="/pages/scene/scene-echart-pie"></uni-list-item>
			<uni-list-item title="echart-雷达图" clickable showArrow to="/pages/scene/scene-echart-radar"></uni-list-item>
			<uni-list-item title="echart-圆环图" clickable showArrow to="/pages/scene/scene-echart-ring"></uni-list-item>
		</uni-list>

		<uni-stitle :title="'colorui'" :padding="true" :background="'#f5f5f5'"></uni-stitle>
		<uni-list><uni-list-item title="colorui-文字对齐" clickable showArrow to="/pages/scene/scene-colorui-textalign"></uni-list-item></uni-list>
		<uni-stitle :title="'发现更多'" :padding="true" :background="'#f5f5f5'"></uni-stitle>
		<view class="morelist">
			<uni-list>
				<uni-list-item v-for="d in list" :key="d.id" :title="d.title" :note="d.duration">
					<image slot="header" mode="aspectFill" :src="d.userPic" style="width: 200rpx;height: 140rpx; border-radius:4px; margin:-5px 10px -5px -10px"></image>
				</uni-list-item>
			</uni-list>
		</view>
		<uni-load-more :status="status"></uni-load-more>
			<button v-if="isshowbtn" @click="goTop" type="default" size="mini"
				style="position: fixed;right:30rpx;bottom:30rpx">回到顶部</button>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			options: [
				{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			iframeArr: [
				{ title: '动画css无限旋转', src: 'https://blog.csdn.net/dongsdh/article/details/81590696' },
				{ title: '字符串处理及扩展', src: 'https://blog.csdn.net/dongsdh/article/details/81590696' }
			],

			gridList: [
				{
					name: '全屋智能',
					icontype: 'icon-shouxinxiangqing-caozuorizhi',
					iconsize: 23,
					id: 0
				},
				{
					name: '米家众测',
					icontype: 'icon-up-arrow',
					iconsize: 22,
					id: 2
				},
				{
					name: '小米公益',
					icontype: 'icon-liwu',
					iconsize: 30,
					id: 1
				},
				{
					name: '有品商城',
					icontype: 'icon-fangzi01-copy',
					iconsize: 24,
					id: 3
				}
			],
			avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
			intelligenceList: [
				{
					title: '左菜单上下滑动选择',
					imgspecial: require('@/static/scene/page2.png'),
					id: 1,
					src:"/pages/book/book"
				},
				{
					title: '单独列表上拉下拉',
					imgspecial: require('@/static/scene/page1.png'),
					id: 2,
					src:"/pages/productList/productList"
				},
				{
					title: '商城页展示',
					imgspecial: require('@/static/scene/page3.png'),
					id: 3,
					src:"/pages/goods/goods"
				}
			],
			parms: {
				page: 1,
				size: 10
			},
			list: [],
			status: 'more',
			isshowbtn: false
		};
	},
	onShow() {
		console.log(uni.$u);
	},
	onReachBottom() {
		this.status = 'loading';
		if (this.parms.page == 5) {
			this.status = 'no-more';

			return false;
		}
		this.parms.page++;
		// uni.request({
		// 	url: '/web/api/getHaoKanVideo', //接口地址即要跨域访问的目标地址
		// 	method: 'GET',
		// 	data: this.parms,
		// 	success: res => {
		// 		this.list = [...this.list, ...res.data.result.list];
		// 		this.status = 'more';
		// 	},
		// 	fail: () => {},
		// 	complete: () => {}
		// });
	},
	created() {
		this.getDate();
	},
	computed: {
		goods() {
			return this.$store.state.goods;
		}
	},
	methods: {
		onChange(e) {
			if (e.detail.index == 0) {
				uni.navigateTo({
					url: '/pages/productList/productList'
				});
			} else if (e.detail.index == 1) {
				uni.navigateTo({
					url: '/pages/mijiaDetail/mijiaDetail?title=米家众测&a=1'
				});
			} else if (e.detail.index == 2) {
				uni.navigateTo({
					url: '/pages/book/book'
				});
			} else if (e.detail.index == 3) {
				uni.navigateTo({
					url: '/pages/goods/goods'
				});
			} else {
				uni.showToast({
					title: e.detail.index + '',
					icon: 'none',
					duration: 2000
				});
			}
		},
		goiframe(d) {
			uni.navigateTo({
				url: `/pages/iframe/iframe?title=${d.title}&src=${d.src}`
			});
		},
		ClickSpecial(d) {
			// uni.showToast({
			// 	title: d.title,
			// 	icon: 'none',
			// 	duration: 2000
			// });
			uni.navigateTo({
				url:d.src
			})
		},
		onClick(e) {
			console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮');
		},
		swipeChange(e, index) {
			console.log('当前状态：' + e + '，下标：' + index);
		},
		getDate() {
			// uni.request({
			// 	url: '/web/api/getHaoKanVideo', //接口地址即要跨域访问的目标地址
			// 	method: 'GET',
			// 	data: this.parms,
			// 	success: res => {
			// 		this.list = res.data.result.list;
			// 	},
			// 	fail: err => {},
			// 	complete: () => {}
			// });
		}
	}
};
</script>

<style lang="scss">
.s-scene {
	background: #f5f5f5;
	padding: 0 16rpx;
	box-sizing: border-box;
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 0;
		box-sizing: border-box;
		height: 100%;
		justify-content: space-around;
		.uni-icons {
			height: 60rpx;
			line-height: 60rpx;
		}
		.text {
			font-size: 24rpx;
			margin-top: 16rpx;
		}
	}
	.imgbox {
		.img {
			width: 100%;
			height: 280rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}
	}
	.wiki-content {
		.uni-list--base {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.uni-list-item__content-note {
			margin-top: 20rpx;
			display: inline-block;
			span {
				display: inline-block;
				box-sizing: border-box;
				border: 1px solid #999;
				padding: 1rpx 6rpx;
				border-radius: 6px;
			}
		}
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 10rpx 0;
		box-sizing: border-box;
	}
	.special-item {
		display: inline-block;
		width: 600rpx;
		height: 460rpx;
		padding: 0 20rpx 60rpx;
		box-sizing: border-box;
		.titleTwo {
			font-size: 14px;
			color: #999;
		}
		.speimg {
			margin-top: 20rpx;
			height: 332rpx;
			width: 100%;
			border-radius: 16rpx;
		}
	}
	.intelligence-item {
		display: inline-block;
		width: 320rpx;
		height: 460rpx;
		padding: 0 20rpx 60rpx;
		box-sizing: border-box;
		.titleTwo {
			font-size: 16rpx;
			color: #999;
		}
		.speimg {
			margin-top: 20rpx;
			height: 332rpx;
			width: 100%;
			border-radius: 16rpx;
		}
	}
	.morelist {
		.uni-list-item__icon-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 14rpx;
		}
		.uni-list-item__content-title {
			font-size: 32rpx;
			font-weight: bold;
		}
		.uni-list-item__content-note {
			display: inline-block;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-top: 14rpx;
		}
	}
}
</style>
